<template>
	<!-- 店铺海报 -->
	<view class="single-goods-posters">
		<view class="status_bar"><!-- 这里是状态栏 --></view>

		<!-- 画布，隐藏状态，生成海报图片时用 -->
		<view class="ctx">
			<canvas canvas-id="ctx" style="width: 375px; height: 667px;"></canvas>
		</view>

		<!-- 编辑海报区 -->
		<view class="edit-poster">

			<!-- 编辑区 -->
			<view class="edit-box" :style="{ background: `url(${posterValData.url}) 0 0 no-repeat` }">
				<!-- 头部小标题 -->
				<!-- <view class="header-title flex flex-ai-c flex-jc-c">
          <i-icon icon="iconxing" type="mutilple" size="50rpx"></i-icon>
          <text class="text">推荐一款低价车给您，请查收</text>
        </view> -->

				<!-- 大小标题 -->
				<view v-show="titleShow" class="title-box">
					<view class="big-title">
						<input type="text" v-model="posterData.bigTitle" maxlength="7"
							:style="{color: posterValData.color}" class="text" />
						<i-icon icon="iconquxiaoxunjia" color="#DFDFDF"
							@click.native.stop="resetVal('bigTitle')"></i-icon>
					</view>
					<view class="small-title">
						<input type="text" v-model="posterData.smallTitle1" maxlength="12"
							:style="{color: posterValData.color}" class="text" />
						<i-icon icon="iconquxiaoxunjia" color="#DFDFDF"
							@click.native.stop="resetVal('smallTitle1')"></i-icon>
					</view>
				</view>

				<!-- 大图 -->
				<view v-show="titleShow" class="img-box">
					<view class="img" v-show="posterData.img">
						<image :src="posterData.img"></image>
						<i-icon icon="iconquxiaoxunjia" color="#DFDFDF" @click.native.stop="resetVal('img')"></i-icon>
					</view>
					<view class="btn" v-show="!posterData.img" @click="addImg()">
						<u-icon name="plus" :size="80" color="#d6d6d6"></u-icon>
					</view>
				</view>

				<!-- 副标题2 -->
				<view v-show="titleShow" class="title-box">
					<view class="small-title">
						<input type="text" v-model="posterData.smallTitle2" maxlength="14"
							:style="{color: posterValData.color}" class="text" />
						<i-icon icon="iconquxiaoxunjia" color="#DFDFDF"
							@click.native.stop="resetVal('smallTitle2')"></i-icon>
					</view>
				</view>

				<!-- 底部店铺信息 -->
				<view v-show="titleShow" class="store-info flex flex-ai-c flex-jc-sb">
					<view class="info-box flex flex-ai-c">
						<!-- 店铺logo -->
						<view class="logo">
							<image :src="posterData.store.headerImg" mode="widthFix" style="width: 100%;height: 100%;">
							</image>
						</view>

						<!-- 店铺名 -->
						<view class="store-text">
							<view class="big-text">{{ posterData.store.storeName }}</view>
							<view class="small-text">长按识别 进店优惠</view>
						</view>
					</view>

					<!-- 店铺二维码 -->
					<view class="store-qrcode">
						<image :src="posterData.store.qrcode" mode="widthFix"></image>
					</view>
				</view>

				<!-- 如果不是第一张背景图，直接显示店铺二维码 -->
				<view v-show="!titleShow" class="store-qrcode-big">
					<view class="img">
						<image :src="posterData.store.qrcode" mode="widthFix"></image>
					</view>
					<view class="text">扫码提升我俩的缘分</view>
				</view>
			</view>
		</view>

		<view class="footer-box">
			<!-- 背景图列表预选 -->
			<view class="bg-img-box">
				<u-loading :show="loadingBgFlag" mode="circle" size="40"></u-loading>

				<view class="bg-img-list">
					<template v-for="(item, index) in bgimglist">
						<view :key="item.id" :class="['bg-img-item', posterValData.id === item.id ? 'bd-active' : '']">
							<image :src="item.url" @click="selectBgPoster(item, index)" mode="aspectFill"></image>
						</view>
					</template>
				</view>
			</view>

			<!-- 底部按钮 -->
			<view class="footer-btns flex flex-ai-c">
				<!-- 返回 -->
				<view class="btn-goback" @click="goback()"><u-icon name="arrow-left" size="48" color="#fff"></u-icon>
				</view>

				<view class="btn-box flex flex-ai-c">
					<!-- 更换商品 -->
					<!-- <view v-show="posterData.store.qrcode" class="update-goods" @click="goback()">更换商品</view> -->

					<!-- 分享按钮 -->
					<view class="btn-share" @click="goShare()">
						<i-icon icon="iconshare" size="34rpx" color="#343434"></i-icon>
						<text class="text">去分享</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 分享弹窗选项 -->
		<i-share-popup v-model="sharePopupShow" @change="handleShare"></i-share-popup>
	</view>
</template>

<script src="./storePoster.js"></script>

<style lang="scss" scoped>
	@import './storePoster.scss';
</style>